<template>
  <div class="report-container">
    <el-row justify="center" align="top" style="height: 78vh;">
      <el-col :span="20">
        <div class="report-content">
          <h1 class="report-title">—————————— 客户构成统计 ——————————</h1>
          <div class="report-chart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElRow, ElCol, ElMessage } from 'element-plus';
import {ref, reactive, onMounted} from 'vue';
import * as echarts from "echarts";
import axios from 'axios';

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

onMounted(async () => {
    drawReport();
});

const drawReport = async () => {
  const reportData = await axios.get('api/customer/sta');
  console.log(reportData);
  if (!reportData.data.code) {
    ElMessage.error('获取报表失败');
  }

  var ConstituteChart = echarts.init(document.querySelector(".report-chart"));
  var option = {
    xAxis: {
      type: 'category',
      data: reportData.data.data.column,
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: reportData.data.data.data,
        type: 'line',
      }
    ]
  };
  ConstituteChart.setOption(option)
}

</script>

<style scoped>
.report-container {
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  background-image: url(/src/assets/img/loginLogo1.jpg);
  background-size: cover;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.report-content {
  height: 73.2vh;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.report-title {
  font-size: 25px;
  margin-bottom: 20px;
  color: #333;
}

.report-description {
  font-size: 18px;
  margin-bottom: 40px;
  color: #666;
}

.report-chart {
  height: 500px;
  width: 900px;
}
</style>
